<template>
  <div class="m-teach-base-info">
    <div class="m-h3-btn-box border">
      <h3>学管信息</h3>
      <div class="u-btn-box">
        <el-button type="primary" @click="teachingSave()" size="small">{{
          isTeachingSave ? "保存" : "编辑"
        }}</el-button>
      </div>
    </div>
    <el-form
      :model="teaching"
      label-width="150px"
      label-position="right"
      :rules="teachingRules"
      ref="teaching"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="所属团队：" prop="tutorType">
            <el-select
              :disabled="!isTeachingSave"
              v-model="teaching.tutorType"
              filterable
              allow-create
              default-first-option
              placeholder="请输入所属团队"
            >
              <el-option
                v-for="item in team_options"
                :key="item.value"
                :label="item.label"
                :value="String(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="teaching.tutorType == tutor_type">
          <el-form-item label="负责年级：" prop="grade">
            <nice-select
              :disabled="!isTeachingSave"
              v-model="teaching.grade"
              placeholder="请选择年级"
              clearable
              :options="selectEnums.speaker_grade"
            ></nice-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="teaching.tutorType == tutor_type">
          <el-form-item label="负责科目：" prop="subject">
            <nice-select
              :disabled="!isTeachingSave"
              v-model="teaching.subject"
              placeholder="请选择科目"
              clearable
              :options="selectEnums.speaker_subject"
            ></nice-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="teaching.tutorType == tutor_type">
        <el-col :span="6">
          <el-form-item label="分配状态：" prop="allocationStatus">
            <el-select
              :disabled="!isTeachingSave"
              v-model="teaching.allocationStatus"
              filterable
              allow-create
              default-first-option
              placeholder="请输入分配状态"
            >
              <el-option
                v-for="item in allocation_status_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="等级：" prop="starNum">
            <el-select
              :disabled="!isTeachingSave"
              v-model="teaching.starNum"
              filterable
              allow-create
              default-first-option
              placeholder="请输入等级"
            >
              <el-option
                v-for="item in star_num_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学生上限：" prop="studentUpper">
            <el-input
              :disabled="!isTeachingSave"
              v-model="teaching.studentUpper"
              placeholder="请输入所带学生上限"
              clearable
              type="number"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="teaching.tutorType == tutor_type">
        <el-col :span="6">
          <el-form-item label="指派状态：" prop="designateStatus">
            <el-select
              :disabled="!isTeachingSave"
              v-model="teaching.designateStatus"
              placeholder="请输入指派状态"
              filterable
              allow-create
              default-first-option
            >
              <el-option
                v-for="item in designate_status_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="teaching.tutorType == tutor_type">
        <el-form-item label="微信二维码：" prop="qrCode" class="clearfix">
          <div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :disabled="!isTeachingSave"
              :before-upload="beforeAvatarUpload"
              :http-request="uploadTeacherAvatarImg"
            >
              <img
                v-if="teaching.qrCode"
                :src="teaching.qrCode"
                class="avatar"
              />
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
              <div slot="tip" class="el-upload__tip">
                请上传jpg.png格式的图片，建议图片宽度1096px。建议图片大小不超过5MB。
              </div>
            </el-upload>
          </div>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  ossUpload,
  teacherTutorupdate,
  teacherTutorsave,
  teacherTutorsaveOrUpdate
} from "@/api/api.js";
import _ from "underscore";
export default {
  props: {
    selectEnums: {
      type: Object,
      default: function() {
        return {};
      }
    },
    teachingInfo: {
      type: Object,
      default: function() {
        return {};
      }
    },
    url: "",
    staffId: ""
  },
  data() {
    return {
      teaching: {
        tutorType: "1", // 团队  1：新生团队  2：转付费团队
        starNum: "", // 星级
        allocationStatus: "", // 分配状态0:不允许分配  1：允许分配
        designateStatus: "", // 指派状态 0：不允许  1：允许
        studentUpper: "", // 学生上限
        grade: "",
        subject: "",
        qrCode: "", // 二维码,
        tutorId: ""
      },
      team_options: [],
      allocation_status_options: [
        {
          label: "不允许分配",
          value: "0"
        },
        {
          label: "允许分配",
          value: "1"
        }
      ],
      designate_status_options: [
        {
          label: "不允许",
          value: "0"
        },
        {
          label: "允许",
          value: "1"
        }
      ],
      star_num_options: [
        {
          label: "1星",
          value: "1"
        },
        {
          label: "2星",
          value: "2"
        },
        {
          label: "3星",
          value: "3"
        },
        {
          label: "4星",
          value: "4"
        },
        {
          label: "5星",
          value: "5"
        }
      ],
      isTeachingSave: false,
      tutor_type: "",
      teachingRules: {
        student_upper: [
          {
            validator: (rule, value, callback) => {
              if (!/^([1-9][0-9]{0,1}|99)$/.test(value) && value) {
                callback("请输入1到99之间的整数！"); //eslint-disable-line
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    teachingInfo: {
      handler(val) {
        if (val) {
          this.isTeachingSave = false;
          this.teaching.tutorType = val.tutorType + "" || "";
          this.teaching.starNum = val.starNum + "" || "";
          this.teaching.allocationStatus = val.allocationStatus + "" || "";
          this.teaching.designateStatus = val.designateStatus + "" || "";
          this.teaching.studentUpper = val.studentUpper + "" || "";
          this.teaching.grade = val.grade || "";
          this.teaching.subject = val.subject || "";
          this.teaching.qrCode = val.qrCode || "";
          // this.teaching.tutorId = val.userId;

          this.$nextTick(() => {
            this.$refs["teaching"].clearValidate();
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.team_options = JSON.parse(
      window.localStorage.getItem("nice_teacher_tutor-tutor_type")
    );
    let xin = _.filter(this.team_options, function(item) {
      return item.display_value == "新签团队";
    });
    this.tutor_type = xin[0].value;
  },
  methods: {
    teachingSave() {
      if (this.isTeachingSave) {
        this.$refs["teaching"].validate(valid => {
          if (valid) {
            this.submit();
          }
        });
      } else {
        this.isTeachingSave = true;
      }
    },

    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式 或 GIF 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }
      return isJPG && isLt5M;
    },
    async submit() {
      let params = {};
      this.teachingInfo.id
        ? (params = Object.assign({}, this.teaching, {
            id: this.teachingInfo.id,
            tutorId: this.teachingInfo.tutorId
          }))
        : (params = Object.assign({}, this.teaching, {
            tutorId: this.teachingInfo.tutorId
          }));
      let res = await teacherTutorsaveOrUpdate(params);
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.$message.success("保存成功！");
        this.isTeachingSave = false;
        this.$emit("refreshData");
      } else {
        this.$message.error(res[1].msg);
      }
    },
    async uploadTeacherAvatarImg(e) {
      let formData = new FormData();
      formData.append("file", e.file);
      let res = await ossUpload(formData, "POSTER_COVER");
      if (res[0]) {
        return;
      }
      this.teaching = Object.assign({}, this.teaching, {
        qrCode: res[1].data.url
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-radio {
  position: relative;
  .el-upload-delete {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>
